<template>
  <div class="grid grid-cols-4 mt-2">
    <div class="m-auto">
      <n-avatar
        class="pointer"
        round
        :src="info.avatar"
        :size="50"
        @click="checkDetail"
      ></n-avatar>
    </div>
    <div class="col-span-2">
      <div class="font-semibold pointer" @click="checkDetail">
        <n-ellipsis :line-clamp="1" :tooltip="false">
          {{ info.name }}
        </n-ellipsis>
      </div>
      <div class="text-sm text-gray-500">
        <n-ellipsis :line-clamp="1" :tooltip="false">
          {{ info.institution }}
        </n-ellipsis>
      </div>
    </div>
    <div class="m-auto">
      <n-button type="primary" @click="changeFollow" v-show="info.id !== uid">
        {{ info.isFollowing ? '取关' : '关注' }}
      </n-button>
    </div>
  </div>
</template>

<script setup>
import api from '@/api/api'

const props = defineProps(['info'])
const router = useRouter()

const uid = localStorage.getItem('id')

const message = useMessage()

const checkDetail = () => {
  router.push({ name: 'Profile', params: { id: props.info.id } })
}

// 修改关注状态
const changeFollow = () => {
  api.User.changeFollow({
    id: props.info.id,
    isFollowing: !props.info.isFollowing
  }).then((res) => {
    if (res.success) {
      props.info.isFollowing = !props.info.isFollowing
    } else {
      message.warning('请重试')
    }
  })
}
</script>

<style scoped>
.pointer {
  cursor: pointer;
}
</style>
